<template>
  <div>
    <el-dialog
      title="用例详情"
      :close-on-click-modal="false"
      :visible="showDialog"
      @close="clickClose"
      width="80%"
    >
      <el-form
        ref="apiFrom"
        :model="apiFrom"
        :rules="rules"
        class="apiFrom"
        label-width="100px"
        :disabled="able"
      >
        <el-form-item label="用例名称" prop="name">
          <el-input v-model="apiFrom.name"></el-input>
        </el-form-item>

        <el-form-item label="用例目录" prop="name">
          <wlTreeSelect
                width="240"
                :data="treeData"
                @change="hindleChanged"
                v-model="selected"
                placeholder="请选择用例目录"
                :defaultExpandAll="treeEx"
                :leaf="le"
              ></wlTreeSelect>
        </el-form-item>

        <el-form-item label>
          <!-- 前置方法区 -->
          <el-collapse v-model="activeNames">
            <el-collapse-item title="前置区<折叠>" name="1">
              <div>
                自定义方法：自定义方法生成各种数据，满足用例测试场景需要；
              </div>
              <div>操作数据库：在当前测试环境中执行SQL，保证用例通畅。</div>
              <el-tabs type="border-card" class="commonMeth">
                <el-tab-pane label="自定义方法">
                  <el-card shadow="never" class="addCard">
                    <el-button
                      type="primary"
                      icon="el-icon-plus"
                      circle
                      @click="addComItem"
                    ></el-button>
                    <el-button type="primary" @click="popDes"
                      >查看方法描述</el-button
                    >
                  </el-card>

                  <el-card>
                    <el-form
                      ref="commoFrom"
                      :inline="true"
                      :model="commoFrom"
                      :disabled="able"
                    >
                      <!-- 固定项目 -->
                      <el-form-item label="方法" prop="result">
                        <el-input
                          v-model="commoFrom.result"
                          placeholder="变量名"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label prop="method">
                        <el-select
                          v-model="commoFrom.method"
                          clearable
                          placeholder="选择方法"
                        >
                          <el-option
                            v-for="item in commonMethod"
                            :key="item.id"
                            :label="item.method_name"
                            :value="item.method_name"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label prop="f_params">
                        <el-input
                          v-model="commoFrom.f_params"
                          placeholder="参数一 可为空"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label prop="s_params">
                        <el-input
                          v-model="commoFrom.s_params"
                          placeholder="参数二 可为空"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label prop="t_params">
                        <el-input
                          v-model="commoFrom.t_params"
                          placeholder="参数三 可为空"
                        ></el-input>
                      </el-form-item>

                      <!-- 动态增加项目 -->
                      <!-- 不止一个项目，用div包裹起来 -->
                      <div
                        v-for="(item, index) in commoFrom.dynamicItem"
                        :key="index"
                      >
                        <el-form-item label="方法" prop="result">
                          <el-input v-model="item.result"></el-input>
                        </el-form-item>
                        <el-form-item label prop="method">
                          <el-select
                            v-model="item.method"
                            clearable
                            placeholder="选择方法"
                          >
                            <el-option
                              v-for="item in commonMethod"
                              :key="item.id"
                              :label="item.method_name"
                              :value="item.method_name"
                            ></el-option>
                          </el-select>
                        </el-form-item>

                        <el-form-item label prop="f_params">
                          <el-input
                            v-model="item.f_params"
                            placeholder="参数一 可为空"
                          ></el-input>
                        </el-form-item>
                        <el-form-item label prop="s_params">
                          <el-input
                            v-model="item.s_params"
                            placeholder="参数二 可为空"
                          ></el-input>
                        </el-form-item>
                        <el-form-item label prop="t_params">
                          <el-input
                            v-model="item.t_params"
                            placeholder="参数三 可为空"
                          ></el-input>
                        </el-form-item>

                        <el-form-item>
                          <i
                            :disabled="able"
                            class="el-icon-delete"
                            @click="deleteComItem(item, index)"
                          ></i>
                        </el-form-item>
                      </div>
                    </el-form>
                  </el-card>
                </el-tab-pane>
                <el-tab-pane label="操作数据库" v-if="false">
                  <el-card shadow="never" class="addCard">
                    <el-button
                      type="primary"
                      icon="el-icon-plus"
                      circle
                      @click="addsqlItem"
                    ></el-button>
                  </el-card>

                  <el-card class="sqlCard">
                    <el-form
                      ref="sqlFrom"
                      :inline="true"
                      :model="sqlFrom"
                      :disabled="able"
                    >
                      <!-- 固定项目 -->
                      <el-form-item label="执行SQL" prop="result">
                        <el-input
                          v-model="sqlFrom.result"
                          placeholder="变量名"
                        ></el-input>
                      </el-form-item>

                      <el-form-item label class="inputsql" prop="f_params">
                        <el-input
                          v-model="sqlFrom.f_params"
                          placeholder="请输入SQL"
                        ></el-input>
                      </el-form-item>

                      <el-form-item label class="inputsql" prop="s_params">
                        <el-input
                          v-model="sqlFrom.s_params"
                          placeholder="表字段名"
                        ></el-input>
                      </el-form-item>

                      <!-- 动态增加项目 -->
                      <!-- 不止一个项目，用div包裹起来 -->
                      <div
                        v-for="(item, index) in sqlFrom.dynamicItem"
                        :key="index"
                      >
                        <el-form-item label="执行SQL" prop="result">
                          <el-input
                            v-model="item.result"
                            placeholder="变量名"
                          ></el-input>
                        </el-form-item>

                        <el-form-item label class="inputsql" prop="f_params">
                          <el-input
                            v-model="item.f_params"
                            placeholder="请输入SQL"
                          ></el-input>
                        </el-form-item>

                        <el-form-item label class="inputsql" prop="s_params">
                          <el-input
                            v-model="item.s_params"
                            placeholder="表字段名"
                          ></el-input>
                        </el-form-item>

                        <el-form-item>
                          <i
                            class="el-icon-delete"
                            @click="deletesqlItem(item, index)"
                          ></i>
                        </el-form-item>
                      </div>
                    </el-form>
                  </el-card>
                </el-tab-pane>
              </el-tabs>
            </el-collapse-item>
          </el-collapse>
        </el-form-item>

        <!-- 用例接口体 -->
        <el-form-item label="引用接口">
          <el-button type="primary" @click="selectApiDlg">选择接口</el-button>
        </el-form-item>

        <el-form-item label="接口类型">
          <el-select v-model="apiFrom.apimethod" clearable placeholder="请选择">
            <el-option
              v-for="item in apiType"
              :key="item.id"
              :label="item.method"
              :value="item.method"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="接口路径">
          <el-input v-model="apiFrom.api"></el-input>
        </el-form-item>

        <el-form-item label="请求头">
          <el-input
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 5 }"
            v-model="apiFrom.headers"
          ></el-input>
        </el-form-item>

        <el-form-item label="请求体">
          <el-input
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 5 }"
            v-model="apiFrom.body"
          ></el-input>
        </el-form-item>

        <el-form-item label>
          <el-collapse v-model="activeNames">
            <el-collapse-item title="后置区<折叠>" name="1">
              <div>结果校验:用例的检查点，检查用例执行结果；</div>
              <div>参数化：将用例的返回数据存入变量，方便使用；</div>
              <div>自定义方法：可以使用一些方法将返回结果格式化。</div>
              <el-tabs type="border-card">
                <el-tab-pane label="结果校验">
                  <el-form label-width="100px" class="check" :disabled="able">
                    <el-form-item label="校验数据">
                      <el-radio-group v-model="apiFrom.checkrestype">
                        <el-radio :label="0">Response Header</el-radio>
                        <el-radio :label="1">Response Body</el-radio>
                        <el-radio :label="2">Status Code</el-radio>
                      </el-radio-group>
                    </el-form-item>

                    <el-form-item label="校验方式">
                      <el-select
                        v-model="apiFrom.checkmethod"
                        clearable
                        placeholder="请选择"
                      >
                        <el-option
                          v-for="item in checkMethod"
                          :key="item.id"
                          :label="item.method_name"
                          :value="item.method_name"
                        ></el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="校验值">
                      <el-input v-model="apiFrom.checkdata"></el-input>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
                <el-tab-pane label="参数化">
                  <el-card shadow="never" class="addCard">
                    <el-button
                      type="primary"
                      icon="el-icon-plus"
                      circle
                      @click="parameaddComItem"
                    ></el-button>
                  </el-card>

                  <el-card class="paramComm">
                    <el-form
                      ref="parcommonFrom"
                      :inline="true"
                      :model="parcommonFrom"
                      :disabled="able"
                    >
                      <!-- 固定项目 -->
                      <el-form-item label="获取参数" prop="result">
                        <el-input
                          v-model="parcommonFrom.result"
                          placeholder="变量名"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label prop="method">
                        <el-select
                          v-model="parcommonFrom.method"
                          clearable
                          placeholder="获取参数方法"
                        >
                          <el-option
                            v-for="item in paramMethod"
                            :key="item.id"
                            :label="item.method_name"
                            :value="item.method_name"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label prop="f_params">
                        <el-input
                          v-model="parcommonFrom.f_params"
                          placeholder="定位参数-可为空"
                        ></el-input>
                      </el-form-item>

                      <!-- 动态增加项目 -->
                      <!-- 不止一个项目，用div包裹起来 -->
                      <div
                        v-for="(item, index) in parcommonFrom.dynamicItem"
                        :key="index"
                      >
                        <el-form-item label="获取参数" prop="result">
                          <el-input
                            v-model="item.result"
                            placeholder="变量名"
                          ></el-input>
                        </el-form-item>
                        <el-form-item label prop="method">
                          <el-select
                            v-model="item.method"
                            clearable
                            placeholder="获取参数方法"
                          >
                            <el-option
                              v-for="item in paramMethod"
                              :key="item.id"
                              :label="item.method_name"
                              :value="item.method_name"
                            ></el-option>
                          </el-select>
                        </el-form-item>
                        <el-form-item label prop="f_params">
                          <el-input
                            v-model="item.f_params"
                            placeholder="定位参数-可为空"
                          ></el-input>
                        </el-form-item>
                        <el-form-item>
                          <i
                            class="el-icon-delete"
                            @click="paramedeleteComItem(item, index)"
                          ></i>
                        </el-form-item>
                      </div>
                    </el-form>
                  </el-card>
                </el-tab-pane>

                <el-tab-pane label="自定义方法">
                  <el-card shadow="never" class="addCard">
                    <el-button
                      type="primary"
                      icon="el-icon-plus"
                      circle
                      @click="resaddComItem"
                    ></el-button>
                    <el-button type="primary" @click="popDes"
                      >查看方法描述</el-button
                    >
                  </el-card>

                  <el-card class="resComm">
                    <el-form
                      ref="rescommoFrom"
                      :inline="true"
                      :model="rescommoFrom"
                      :disabled="able"
                    >
                      <!-- 固定项目 -->
                      <el-form-item label="方法" prop="result">
                        <el-input
                          v-model="rescommoFrom.result"
                          placeholder="变量名"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label prop="method">
                        <el-select
                          v-model="rescommoFrom.method"
                          clearable
                          placeholder="选择方法"
                        >
                          <el-option
                            v-for="item in commonMethod"
                            :key="item.id"
                            :label="item.method_name"
                            :value="item.method_name"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label prop="f_params">
                        <el-input
                          v-model="rescommoFrom.f_params"
                          placeholder="参数一 可为空"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label prop="s_params">
                        <el-input
                          v-model="rescommoFrom.s_params"
                          placeholder="参数二 可为空"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label prop="t_params">
                        <el-input
                          v-model="rescommoFrom.t_params"
                          placeholder="参数二 可为空"
                        ></el-input>
                      </el-form-item>

                      <!-- 动态增加项目 -->
                      <!-- 不止一个项目，用div包裹起来 -->
                      <div
                        v-for="(item, index) in rescommoFrom.dynamicItem"
                        :key="index"
                      >
                        <el-form-item label="方法" prop="result">
                          <el-input
                            v-model="item.result"
                            placeholder="变量名"
                          ></el-input>
                        </el-form-item>
                        <el-form-item label prop="method">
                          <el-select
                            v-model="item.method"
                            clearable
                            placeholder="选择方法"
                          >
                            <el-option
                              v-for="item in commonMethod"
                              :key="item.id"
                              :label="item.method_name"
                              :value="item.method_name"
                            ></el-option>
                          </el-select>
                        </el-form-item>

                        <el-form-item label prop="f_params">
                          <el-input
                            v-model="item.f_params"
                            placeholder="参数一 可为空"
                          ></el-input>
                        </el-form-item>
                        <el-form-item label prop="s_params">
                          <el-input
                            v-model="item.s_params"
                            placeholder="参数二 可为空"
                          ></el-input>
                        </el-form-item>
                        <el-form-item label prop="t_params">
                          <el-input
                            v-model="item.t_params"
                            placeholder="参数二 可为空"
                          ></el-input>
                        </el-form-item>

                        <el-form-item prop="s_params">
                          <i
                            class="el-icon-delete"
                            @click="resdeleteComItem(item, index)"
                          ></i>
                        </el-form-item>
                      </div>
                    </el-form>
                  </el-card>
                </el-tab-pane>
              </el-tabs>
            </el-collapse-item>
          </el-collapse>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            type="textarea"
            :autosize="{ minRows: 5, maxRows: 5 }"
            v-model="apiFrom.comments"
            placeholder="用例备注：可以描述用例的场景，给出数据标识，与前后用例关联的数据如何取到或给出SQL。做好备注，可防止遗忘用例细节，方便再次维护用例，方便同事了解用例"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">保存</el-button>
          <el-button @click="onCancel">取消</el-button>
          <el-button type="primary" @click="onCopyNew"
            >保存并复制新增用例</el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>
    <GetApiDialog ref="getApi" />

    <el-drawer
      title="自动义方法规则"
      :visible.sync="drawer"
      show-close
      :modal-append-to-body="false"
      :append-to-body="true"
      :wrapperClosable="false"
      size="20%"
      custom-class="ruledrow"
    >
      <div class="rulediv">
        <div v-for="(item, index) in rulesss" :key="index">
          <el-descriptions :title="item.title" :column="1" direction="vertical">
            <el-descriptions-item label="【变量名】">
              -- {{ item.result }}</el-descriptions-item
            >
            <el-descriptions-item label="【参数一】">
              -- {{ item.f_parames }}</el-descriptions-item
            >
            <el-descriptions-item label="【参数二】">
              -- {{ item.s_parames }}</el-descriptions-item
            >
            <el-descriptions-item label="【参数三】">
              -- {{ item.t_parames }}</el-descriptions-item
            >
            <el-descriptions-item label="【规则描述】">
              -- {{ item.descript }}</el-descriptions-item
            >
          </el-descriptions>
        </div>
        <div><br /></div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  getCaseInfo,
  updateCaseData,
  getCommonmethod,
  getApitype,
  getComdes,
  getApicat
} from "@/network/networks";
import GetApiDialog from "./GetApiDialog";
export default {
  components: {
    GetApiDialog,
  },

  data() {
    return {
      showDialog: false, //判断dlg是否展示
      rowid: 0, //用来取值
      able: false, //判断是否可以编辑
      apiFrom: {
        name: "",
        apimethod: "",
        catid: 0,
        api: "",
        headers: "",
        body: "",
        response: "",
        checkrestype: 0,
        checkmethod: "",
        checkdata: "",
        comments: "",
      },

      //前置方法数据
      commoFrom: {
        id: -1,
        result: "",
        method: "",
        f_params: "",
        s_params: "",
        t_params: "",
        dynamicItem: [],
      },

      //后置方法数据
      rescommoFrom: {
        id: -1,
        result: "",
        method: "",
        f_params: "",
        s_params: "",
        t_params: "",
        dynamicItem: [],
      },

      commonMethod: [], //自动定方法名称
      paramMethod: [], //参数化方法
      checkMethod: [], //检查点方法
      apiType: [], //接口类型

      //参数化数据
      parcommonFrom: {
        id: -1,
        result: "",
        method: "",
        f_params: "",
        s_params: "",
        t_params: "",
        dynamicItem: [],
      },

      //SQL操作
      sqlFrom: {
        id: -1,
        result: "",
        method: "",
        f_params: "",
        s_params: "",
        t_params: "",
        dynamicItem: [],
      },

      activeNames: "1",
      drawer: false,
      rulesss:[],
      treeEx: false,
      treeData: [],
      selected: [], // 树下拉框选中数据
      le: true,

      dialogwidth: "80%",

      rules: {
        name: [
          { required: true, message: "请输入用例名称", trigger: "blur" },
          {
            min: 2,
            max: 50,
            message: "长度在 2 到 50 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },

  mounted() {
    this.getCommonMehtod(0);
    this.getCommonMehtod(1);
    this.getCommonMehtod(2);
    this.getApitype();
  },

  methods: {
    getCaseInfo() {
      getCaseInfo({
        rowid: this.rowid,
      })
        .then((res) => {
          if (res.code == 1) {
            let CaseInfo = res.data;
            // console.log(this.parcommonFrom)
            this.apiFrom = CaseInfo["apiFrom"];
            // console.log(this.apiFrom)
            if (JSON.stringify(CaseInfo["commoFrom"]) != "{}") {
              // console.log("commoFrom");
              this.commoFrom = CaseInfo["commoFrom"];
            } else {
              this.commoFrom.id = -1;
            }
            if (JSON.stringify(CaseInfo["sqlFrom"]) != "{}") {
              // console.log("sqlFrom");
              this.sqlFrom = CaseInfo["sqlFrom"];
            } else {
              this.sqlFrom.id = -1;
            }
            if (JSON.stringify(CaseInfo["parcommonFrom"]) != "{}") {
              // console.log(CaseInfo["parcommonFrom"]);
              this.parcommonFrom = CaseInfo["parcommonFrom"];
            } else {
              this.parcommonFrom.id = -1;
            }
            if (JSON.stringify(CaseInfo["rescommonFrom"]) != "{}") {
              this.rescommoFrom = CaseInfo["rescommonFrom"];
            } else {
              this.rescommoFrom.id = -1;
            }
          } else {
            if (this.rowid != -1) {
              this.$message.error(res.msg);
            }
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    onSubmit() {
      // console.log(this.parcommonFrom);
      this.$refs["apiFrom"].validate((valid) => {
        if (!valid) {
          return;
        }
        let caseData = {
          apiFrom: this.apiFrom,
          commoFrom: this.commoFrom,
          sqlFrom: this.sqlFrom,
          parcommonFrom: this.parcommonFrom,
          rescommonFrom: this.rescommoFrom,
        };

        this.updateData(caseData);
      });
      this.clickClose();
    },

    updateData(caseData) {
      updateCaseData(caseData)
        .then((res) => {
          if (res.code == 1) {
            this.$message.success(res.msg);
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    getCommonMehtod(type) {
      getCommonmethod({ menthodType: type })
        .then((res) => {
          if (res.code == 0) {
            this.$message.error(res.msg);
            return;
          }
          if (type == 0) {
            this.commonMethod = res.data;
          } else if (type == 1) {
            this.checkMethod = res.data;
          } else {
            this.paramMethod = res.data;
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    onCancel() {
      this.clickClose();
    },

    clickClose() {
      this.showDialog = false;
      this.able = false;
      this.rowid = -1;
      this.$nextTick(() => {
        this.$refs["apiFrom"].resetFields(); //清上一次的数据
        // this.$refs["commoFrom"].resetFields();
        // this.$refs["sqlFrom"].resetFields();
        // this.$refs["parcommonFrom"].resetFields();
        // this.$refs["rescommoFrom"].resetFields();
        this.commoFrom = {
          id: -1,
          result: "",
          method: "",
          f_params: "",
          s_params: "",
          t_params: "",
          dynamicItem: [],
        };
        this.sqlFrom = {
          id: -1,
          result: "",
          method: "",
          f_params: "",
          s_params: "",
          t_params: "",
          dynamicItem: [],
        };
        this.parcommonFrom = {
          id: -1,
          result: "",
          method: "",
          f_params: "",
          s_params: "",
          t_params: "",
          dynamicItem: [],
        };
        this.rescommoFrom = {
          id: -1,
          result: "",
          method: "",
          f_params: "",
          s_params: "",
          t_params: "",
          dynamicItem: [],
        };
      });
      this.$parent.onSearch();
    },

    selectApiDlg() {
      this.$refs.getApi.showDialog = true;
    },

    setApidata(val) {
      this.apiFrom.apimethod = val.apimethod;
      this.apiFrom.api = val.api;
      this.apiFrom.headers = val.headers;
      this.apiFrom.body = val.body;
      this.$message.success("接口信息获取成功");
    },

    //前置自定义（公共）方法组件增删操作
    addComItem() {
      this.commoFrom.dynamicItem.push({
        id: -1,
        result: "",
        method: "",
        f_params: "",
        s_params: "",
        t_params: "",
      });
    },

    deleteComItem(item, index) {
      if (this.able) {
        return;
      }
      this.commoFrom.dynamicItem.splice(index, 1);
    },

    //后置自动定义（公共）方法组件增删除操作
    resaddComItem() {
      this.rescommoFrom.dynamicItem.push({
        id: -1,
        result: "",
        method: "",
        f_params: "",
        s_params: "",
        t_params: "",
      });
    },

    getApitype() {
      getApitype()
        .then((res) => {
          if (res.code == 0) {
            this.$message.error(res.msg);
            return;
          }
          this.apiType = res.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },

    resdeleteComItem(item, index) {
      if (this.able) {
        return;
      }
      this.rescommoFrom.dynamicItem.splice(index, 1);
    },

    parameaddComItem() {
      this.parcommonFrom.dynamicItem.push({
        id: -1,
        result: "",
        method: "",
        f_params: "",
        s_params: "",
        t_params: "",
      });
    },

    paramedeleteComItem(item, index) {
      if (this.able) {
        return;
      }
      this.parcommonFrom.dynamicItem.splice(index, 1);
    },

    //数据操作组件增删操作
    addsqlItem() {
      this.sqlFrom.dynamicItem.push({
        id: -1,
        result: "",
        method: "",
        f_params: "",
        s_params: "",
        t_params: "",
      });
    },

    deletesqlItem(item, index) {
      if (this.able) {
        return;
      }
      this.sqlFrom.dynamicItem.splice(index, 1);
    },

    //保存复制数据并新增
    onCopyNew() {
      this.$refs["apiFrom"].validate((valid) => {
        if (!valid) {
          return;
        }
        let caseData = {
          apiFrom: this.apiFrom,
          commoFrom: this.commoFrom,
          sqlFrom: this.sqlFrom,
          parcommonFrom: this.parcommonFrom,
          rescommonFrom: this.rescommoFrom,
        };
        this.updateData(caseData);
        this.$router.push({
          path: "/caseadd",
          name: "CD",
          params: {
            nodeid: this.apiFrom.catid_id,
            iscopy: 1,
            caseData: caseData,
          },
        });
      });
    },

    popDes() {
      getComdes()
        .then((res) => {
          if (res.code == 1) {
            this.rulesss = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });
      this.drawer = true;
    },

    // 选择目录树
    hindleChanged(val) {
      this.apiFrom.catid_id = val[0].id
    },
        // 获取接口分类
    getCategory() {
      getApicat({
        cat_type: 1,
      }).then((res) => {
        this.treeData = res.data;
        // console.log(this.apiFrom.catid_id)
        //初始化显示当前目录
        if (this.apiFrom.catid_id != 0) {
          var lst_data = res.data[0];
          for (var i = 0; i < lst_data.children.length; i++) {
            var lst_arr = lst_data.children[i];
            for (var j = 0; j < lst_arr.children.length; j++) {
              var lst_carr = lst_arr.children[j];
              if (lst_carr.id == this.apiFrom.catid_id) {
                this.selected = lst_carr;
                // console.log(lst_carr)
                return;
              }
            }
          }
        }
      });
    },

  },

  watch: {
    rowid(val) {
      this.getCaseInfo();
      this.getCategory()
    },

    able(val) {
      this.getCaseInfo();
    },
  },
};
</script>

<style lang="less" scoped>
</style>